<template>
  <!-- iframe类似的独立的小浏览器 -->
  <iframe class="if-box" src="http://localhost:8081/workbench" frameborder="0"></iframe>

  <div>
    <h1>回顾 echarts 使用</h1>
    <p>{{ parkInfo }}</p>
    <!-- 1. 准备 echarts 渲染的盒子，设置宽高 -->
    <div ref="echart" class="box"></div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
import { useParkInfo } from '../big-screen/services'
// console.log('echarts所有方法：', echarts)
const echart = ref(null)
const initChart = () => {
  // 2. 初始化 echarts 实例
  const barChart = echarts.init(echart.value)
  // 3. 使用barChart.setOption( 传入对应图标的配置项 )绘制图标
  // 方法：看文档，在线调试修改，复制 option 配置项
  // 柱状图
  // const option = {
  //   title: {
  //     text: '2019年',
  //     textStyle: {
  //       align: 'center',
  //       color: '#fff',
  //       fontSize: 20
  //     },
  //     top: '3%',
  //     left: '10%'
  //   },
  //   backgroundColor: '#0f375f',
  //   grid: {
  //     top: '25%',
  //     bottom: '10%' //也可设置left和right设置距离来控制图表的大小
  //   },
  //   tooltip: {
  //     trigger: 'axis',
  //     axisPointer: {
  //       type: 'shadow',
  //       label: {
  //         show: true
  //       }
  //     }
  //   },
  //   legend: {
  //     data: ['销售水量', '主营业务'],
  //     top: '15%',
  //     textStyle: {
  //       color: '#ffffff'
  //     }
  //   },
  //   xAxis: {
  //     data: [
  //       '当年完成水量',
  //       '去年同期水量',
  //       '滚动目标值水量',
  //       '全年目标值水量',
  //       '当年完成金额',
  //       '去年同期金额',
  //       '滚动目标金额',
  //       '全年目标值'
  //     ],
  //     axisLine: {
  //       show: true, //隐藏X轴轴线
  //       lineStyle: {
  //         color: '#01FCE3'
  //       }
  //     },
  //     axisTick: {
  //       show: true //隐藏X轴刻度
  //     },
  //     axisLabel: {
  //       show: true,
  //       textStyle: {
  //         color: '#ebf8ac' //X轴文字颜色
  //       }
  //     }
  //   },
  //   yAxis: [
  //     {
  //       type: 'value',
  //       name: '亿元',
  //       nameTextStyle: {
  //         color: '#ebf8ac'
  //       },
  //       splitLine: {
  //         show: false
  //       },
  //       axisTick: {
  //         show: true
  //       },
  //       axisLine: {
  //         show: true,
  //         lineStyle: {
  //           color: '#FFFFFF'
  //         }
  //       },
  //       axisLabel: {
  //         show: true,
  //         textStyle: {
  //           color: '#ebf8ac'
  //         }
  //       }
  //     },
  //     {
  //       type: 'value',
  //       name: '同比',
  //       nameTextStyle: {
  //         color: '#ebf8ac'
  //       },
  //       position: 'right',
  //       splitLine: {
  //         show: false
  //       },
  //       axisTick: {
  //         show: false
  //       },
  //       axisLine: {
  //         show: false
  //       },
  //       axisLabel: {
  //         show: true,
  //         formatter: '{value} %', //右侧Y轴文字显示
  //         textStyle: {
  //           color: '#ebf8ac'
  //         }
  //       }
  //     },
  //     {
  //       type: 'value',
  //       gridIndex: 0,
  //       min: 50,
  //       max: 100,
  //       splitNumber: 8,
  //       splitLine: {
  //         show: false
  //       },
  //       axisLine: {
  //         show: false
  //       },
  //       axisTick: {
  //         show: false
  //       },
  //       axisLabel: {
  //         show: false
  //       },
  //       splitArea: {
  //         show: true,
  //         areaStyle: {
  //           color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)']
  //         }
  //       }
  //     }
  //   ],
  //   series: [
  //     {
  //       name: '销售水量',
  //       type: 'line',
  //       yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
  //       smooth: true, //平滑曲线显示
  //       showAllSymbol: true, //显示所有图形。
  //       symbol: 'circle', //标记的图形为实心圆
  //       symbolSize: 10, //标记的大小
  //       itemStyle: {
  //         //折线拐点标志的样式
  //         color: '#058cff'
  //       },
  //       lineStyle: {
  //         color: '#058cff'
  //       },
  //       areaStyle: {
  //         color: 'rgba(5,140,255, 0.2)'
  //       },
  //       data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5]
  //     },
  //     {
  //       name: '主营业务',
  //       type: 'bar',
  //       barWidth: 15,
  //       itemStyle: {
  //         normal: {
  //           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  //             {
  //               offset: 0,
  //               color: '#00FFE3'
  //             },
  //             {
  //               offset: 1,
  //               color: '#4693EC'
  //             }
  //           ])
  //         }
  //       },
  //       data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5]
  //     }
  //   ]
  // }
  // 饼图
  var scale = 1
  var echartData = [
    {
      value: 2154,
      name: '曲阜师范大学'
    },
    {
      value: 3854,
      name: '潍坊学院'
    },
    {
      value: 3515,
      name: '青岛职业技术学院'
    },
    {
      value: 3515,
      name: '淄博师范高等专科'
    },
    {
      value: 3854,
      name: '鲁东大学'
    },
    {
      value: 2154,
      name: '山东师范大学'
    }
  ]
  var rich = {
    yellow: {
      color: '#ffc72b',
      fontSize: 30 * scale,
      padding: [5, 4],
      align: 'center'
    },
    total: {
      color: '#ffc72b',
      fontSize: 40 * scale,
      align: 'center'
    },
    white: {
      color: '#fff',
      align: 'center',
      fontSize: 14 * scale,
      padding: [21, 0]
    },
    blue: {
      color: '#49dff0',
      fontSize: 16 * scale,
      align: 'center'
    },
    hr: {
      borderColor: '#0b5263',
      width: '100%',
      borderWidth: 1,
      height: 0
    }
  }
  const option = {
    backgroundColor: '#031f2d',
    title: {
      text: '总考生数',
      left: 'center',
      top: '53%',
      padding: [24, 0],
      textStyle: {
        color: '#fff',
        fontSize: 18 * scale,
        align: 'center'
      }
    },
    legend: {
      selectedMode: false,
      formatter: function (name) {
        var total = 0 //各科正确率总和
        var averagePercent //综合正确率
        echartData.forEach(function (value, index, array) {
          total += value.value
        })
        return '{total|' + total + '}'
      },
      data: [echartData[0].name],
      // data: ['高等教育学'],
      // itemGap: 50,
      left: 'center',
      top: 'center',
      icon: 'none',
      align: 'center',
      textStyle: {
        color: '#fff',
        fontSize: 16 * scale,
        rich: rich
      }
    },
    series: [
      {
        name: '总考生数量',
        type: 'pie',
        radius: ['42%', '50%'],
        hoverAnimation: false,
        color: ['#c487ee', '#deb140', '#49dff0', '#034079', '#6f81da', '#00ffb4'],
        label: {
          normal: {
            formatter: function (params, ticket, callback) {
              var total = 0 //考生总数量
              var percent = 0 //考生占比
              echartData.forEach(function (value, index, array) {
                total += value.value
              })
              percent = ((params.value / total) * 100).toFixed(1)
              return (
                '{white|' +
                params.name +
                '}\n{hr|}\n{yellow|' +
                params.value +
                '}\n{blue|' +
                percent +
                '%}'
              )
            },
            rich: rich
          }
        },
        labelLine: {
          normal: {
            length: 55 * scale,
            length2: 0,
            lineStyle: {
              color: '#0b5263'
            }
          }
        },
        data: echartData
      }
    ]
  }
  barChart.setOption(option)
}

// 复用获取园区数据的 hooks 函数
const { parkInfo, getParkInfo } = useParkInfo()

onMounted(() => {
  initChart()
  getParkInfo()
})
</script>

<style lang="scss" scoped>
.if-box {
  width: 100%;
  height: 600px;
}
.box {
  width: 600px;
  height: 500px;
}
</style>
